import axios from "axios"
import Vue from "vue"

//引入模块化的store

import users from "./users"

import Vuex from "vuex"

Vue.use(Vuex) //注入到每个子组件


export default new Vuex.Store({
    strict: true,//严格模式 警告开发者必须使用mutaions来变更state
    //五大核心
    //state是专门用于存储组件共享状态的地方
    //什么样是属性应该放到vuex state 什么样的属性应该放到组件的data中?
    //多个组件共享的属性,那么就放到vuex的state中 然后组件内部变更 不需要其它组件变更或者访问的属性  直接放到组件内部就可以了
    state: {
        product: [],
        num: 30,
        title: "vuex真容易啊",
        msg: "我吹过你吹过的晚风"
    },
    //getters 相当于vue里面的计算属性
    //会接收一个state作为参数传入
    //和computed的特性是一样的 结果会缓存 依赖外界响应式变化而变化
    getters: {
        reverseMsg(state) {
            // state.num = 50;
            return state.msg.split("").reverse().join("")
        }
    },
    //储存变更状态的方法
    //mutation是通过一个类型(type)来对应一个处理函数的,这个处理函数可以接受参数
    //参数 state payload
    //编写mutations中的类型的时候 我们会大写类型名字(就是函数名)
    mutations: {
        INCREMENT(state, payload) {
            console.log(payload)
            state.num++
        },
        DECREMENT(state, payload) {
            state.num--
        },
        SET_PRODUCT(state, payload) { 
            state.product = payload
        }
    },
    //用于异步操作,获取数据之后提交给Mutations,让mutations来变更state的数据
    //actions也是由一个类型对应一个处理函数,处理函数会接收一个叫做context的对象,还可以接收一个叫做payload的参数,这个对象中包含了vuex中的其它属性
    //触发actions需要通过dispatch这个方法来触发
    actions: {
        FETCH_PRODUCT({ commit, state }, payload) {
            //这里可以修改state 视图也会响应变更 但是vuex调试工具无法检测到变化
            // console.log(payload)
            // context.state.num = 90
            // console.log(context)
            //发送异步请求
            axios("/api/data/index.json")
                .then(res => {
                    // console.log(res)
                    // state.product = res.data.data
                    commit("SET_PRODUCT",res.data.data)
                })
        }
    },
    //模块化
    modules: {
        users
    }
})